<template>
	<view>
		<u-navbar title="添加地址" title-color="#333" back-icon-color="#333"></u-navbar>
		<!-- 商品信息 -->
		<view style="padding: 32rpx;font-size: 28rpx;">
			<view style="margin-top: 24rpx;border-bottom: #F5F5F5 1px solid;padding: 16rpx 0;">
				<view style="display: flex;">
					<view style="font-size: 28rpx;font-weight: bold;width: 116rpx;">联系人</view>
					<view style="margin-left: 48rpx;flex: 1;display: flex;">
						<input class="u-flex-1" v-model="formModal.nickname" type="text" placeholder="请填写称呼"/>
						<view>
							<u-radio-group v-model="value">
								<u-radio active-color="#0BB1EF" name="1" @change="radioChange">先生</u-radio>
								<u-radio active-color="#0BB1EF" name="2" @change="radioChange">女士</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 24rpx;border-bottom: #F5F5F5 1px solid;padding: 16rpx 0;">
				<view style="display: flex;">
					<view style="font-size: 28rpx;font-weight: bold;width: 116rpx;">联系电话</view>
					<view style="margin-left: 48rpx;flex: 1;">
						<input class="u-flex-1" v-model="formModal.mobile" type="number" placeholder="请填写您的联系电话"/>
					</view>
				</view>
			</view>
			<view style="margin-top: 24rpx;border-bottom: #F5F5F5 1px solid;padding: 16rpx 0;">
				<view style="display: flex;">
					<view style="font-size: 28rpx;font-weight: bold;width: 116rpx;">所在地区</view>
					<view style="margin-left: 48rpx;flex: 1;">
						<view class="u-flex u-flex-1 link-active" @click="regionShow = true">
							<label class="u-flex-1" > {{ formModal.region }} </label>
							
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 24rpx;border-bottom: #F5F5F5 1px solid;padding: 16rpx 0;">
				<view style="display: flex;">
					<view style="font-size: 28rpx;font-weight: bold;width: 116rpx;">详细地址</view>
					<view style="margin-left: 48rpx;flex: 1;display: flex;align-items: center;justify-content: space-between;">
						<view style="flex: 1;">
							<input class="u-flex-1" v-model="formModal.addrdetails" type="text" placeholder="请填写服务详细地址" />
						</view>
						<view @click="toMapSelection">
							<u-icon name="map-fill" color="#0bb1ef" label-size="40" ></u-icon>
							<label style="width: 30px;flex: none;margin-left: 5rpx;color:#0bb1ef;"> 定位 </label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		<!-- <view style="text-align: center;margin-top: 40rpx;">
			<label style="color:rgb(11, 177, 239);" @click="jumpImport()"> 一键导入 </label>
		</view> -->
		<view style="height: 120rpx;"></view>
		<!-- 底部按钮 -->
		<!-- <view style="position: fixed;bottom: 0;width: 100%;padding: 18rpx 32rpx;text-align: center;
		background: #fff;display: flex;justify-content: space-between;align-items: center;">
			<view style="width: 100%;">
				<view style="background: #0BB1EF;
				padding: 18rpx 32rpx;border-radius: 16rpx;color: #fff;"
				@click="clickSubmit">保存</view>
			</view>
		</view> -->
		<view style="width: 100%;position: fixed;bottom: 0;">
			<view style="background: #fff;display: flex;align-items: center;justify-content: center;
			padding: 34rpx 34rpx 54rpx 34rpx;font-size: 32rpx;">
				<view style="color: #fff;background: #0BB1EF;
				padding: 20rpx 0;border-radius: 60rpx;width: 100%;text-align: center;"
				@click="clickSubmit">保存</view>
			</view>
		</view>
		
		<!-- 选择地区 :area-code='["13", "1303", "130304"]' -->
		<u-picker mode="region" v-model="regionShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
	// import { addressApi } from '@/common/order.js';
	import { request } from 'utils/request.js';
	export default {
		name: "FinanceRegister",
		data() {
			return {
				regionShow: false,
				
				a_id: 0,
				
				value: 1,
				
				formModal: {
					nickname: '',
					mobile: '',
					gender: 1,
					region: '请选择服务所在地区',
					addrdetails: '',
					
					province: '',
					province_name: '',
					city: '',
					city_name: '',
					area: '',
					area_name: '',
				}
				
			};
		},
		onLoad(e){
			
			if(e.id){
				console.log(e.id);
				this.getaddressInfo(e.id)
			}
			uni.$on('importAddress', (e) => {
				// console.log('userAddressAdd: ', e);
				this.formModal.nickname = e.nickname;
				this.formModal.mobile = e.mobile;
				this.formModal.longitude = e.longitude;
				this.formModal.latitude = e.latitude;
				this.formModal.region = e.region;
				this.formModal.addrdetails = e.addrdetails
				// this.addressData = e;
			});
		},
		methods: {
			// 选择省市区
			regionConfirm(e){
				console.log('选择省市区:', e);
				this.formModal.province = e.province.value;
				this.formModal.province_name = e.province.label;
				
				this.formModal.city = e.city.value;
				this.formModal.city_name = e.city.label;
				
				this.formModal.area = e.area.value;
				this.formModal.area_name = e.area.label;
				
				this.formModal.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 查询地址
			getaddressInfo(e){
				addressApi.getAddressInfo({id: e}).then(res => {
					console.log(res)
						this.formModal = res.addressInfo;
					});
			},
			// 提交
			clickSubmit(){
				request.postWithToken({
					url: '/useraddress/postAddressSet',
					data: this.formModal
				}).then(res=>{
					console.log(res)
					if(res.code == 1){
						uni.showToast({
							title: '保存成功',
							duration: 2000,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
							uni.$emit('htmlRefresh', {});
						}, 800);
					}else{
						// this.$refs.uToast.show({ title: res.msg });
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			// 获取地址
			toMapSelection() {
				let _this = this
				uni.chooseLocation({
					success: (res)=> {
						console.log('选择位置：', res)
						_this.formModal.latitude = res.latitude;
						_this.formModal.longitude = res.longitude;
						_this.formModal.addrdetails = res.address + res.name;
					}
				});
				return;
				console.log('hhhhhh')
				let self = this;
				uni.$off('pickMap');
				uni.$on('pickMap', function(point) {
					console.log('point: ', point)
					self.formModal.latitude = point.latitude;
					self.formModal.longitude = point.longitude;
					self.formModal.region = point.ad_info.province + '-' + point.ad_info.city + '-' + point.ad_info.district;
					self.formModal.addrdetails = point.exactAddress + point.address;
					uni.$off('pickMap');
				});
				uni.navigateTo({
					url: '/pages/users/MapSelection'
				});
			},
			jumpImport(){
				uni.navigateTo({
					url: '/pages/users/goods/importAddress'
				});
			},
			// 性别切换
			radioChange(e){
				this.formModal.gender = e;
			}
		}
	};
</script>

<style>
	page {
		/* background: #FE8127 !important; */
	}
</style>
<style lang="scss" scoped>
	// @import "static/css/public-custom-form.scss";

	.confirm-btn {
	  margin: 32rpx;
	  // width: calc(100vw - 64rpx);
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  color: #FC7404;
	  background-color: #fff;
	  // border-radius: 999px;
	  border-radius: 24rpx;
	  &:active {
		background-color: lighten(#fff, 10%);
	  }
	}
</style>
